<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <title>购物车</title>  
</head>
<body>
	<div class="wrap">
		<!--标题栏-->
		<div class="fixed_top">
			<div class="top-l"></div>
			<h1>购物车</h1>
			<div class="top-r"><a href="javascript:;" class="bjbtn">编辑</a></div>
		</div>

		<!--主体区域-->
		<div class="container" style="padding-bottom:110px">	
	        <ul class="gw_list">
	        	<li>
	        		<dl>
	        			<dt><i class="icons unchecked">&#xe619;</i><i class="icons checked">&#xe607;</i><span>购买商品</span></dt>
	        			<dd>
	        				<div class="gwinfo">
		        				<div class="checks">
		        					<i class="icons unchecked">&#xe619;</i><i class="icons checked">&#xe607;</i>
		        				</div>
		        				<img class="gw_img" src="img/pic4.png"/>
		        				<h4><p>小米官方旗舰店小米官方旗舰店小米官小米官方旗舰店小米官方旗舰店小米官</p></h4>
		        				<p><span class="price">￥1500.00</span></p>
		        				<div class="addminus">
		        					<a href="javsacript:;" class="minus"><i class="icons">&#xe67d;</i></a>
		        					<span class="number">1</span>
		        					<a href="javsacript:;" class="add"><i class="icons">&#xe60b;</i></a>
		        				</div>
	        				</div>
	        			</dd>
	        			<dd>
	        				<div class="gwinfo">
		        				<div class="checks">
		        					<i class="icons unchecked">&#xe619;</i><i class="icons checked">&#xe607;</i>
		        				</div>
		        				<img class="gw_img" src="img/pic4.png"/>
		        				<h4><p>小米官方旗舰店小米官方旗舰店小米官小米官方旗舰店小米官方旗舰店小米官</p></h4>
		        				<p><span class="price">￥1500.00</span></p>
		        				<div class="addminus">
		        					<a href="javsacript:;" class="minus"><i class="icons">&#xe67d;</i></a>
		        					<span class="number">1</span>
		        					<a href="javsacript:;" class="add"><i class="icons">&#xe60b;</i></a>
		        				</div>
	        				</div>
	        			</dd>
	        			<dd>
	        				<div class="gwinfo">
		        				<div class="checks">
		        					<i class="icons unchecked">&#xe619;</i><i class="icons checked">&#xe607;</i>
		        				</div>
		        				<img class="gw_img" src="img/pic4.png"/>
		        				<h4><p>小米官方旗舰店小米官方旗舰店小米官小米官方旗舰店小米官方旗舰店小米官</p></h4>
		        				<p><span class="price">￥1500.00</span></p>
		        				<div class="addminus">
		        					<a href="javsacript:;" class="minus"><i class="icons">&#xe67d;</i></a>
		        					<span class="number">1</span>
		        					<a href="javsacript:;" class="add"><i class="icons">&#xe60b;</i></a>
		        				</div>
	        				</div>
	        			</dd>
	        		</dl>
	        	</li>
	        </ul>
		</div>
	    
	    
	   <!--结算--> 
	   <div class="pay">
	   	   <label><i class="icons unchecked">&#xe619;</i><i class="icons checked">&#xe607;</i>全选</label>
	   	   <div class="js paytab">
	   	   	   <span class="yf">不含运费</span>
		   	   <p>合计:<span>￥1500</span></p>
		   	   <a href="qrdd.html">结算(<b>0</b>)</a>
	   	   </div>
	   	   <div class="bj paytab">
		   	   <a href="javascript:;" class="sc">删除</a>
		   	   <!--<a href="javascript:;" class="yzsc">移至收藏</a>-->
	   	   </div>
	   </div>
	  

	  
		
		<!--导航栏-->
	    <div class="footer">
      	<ul>
	  	 	<li><a href="index.html"><p><i class="icons">&#xe65c;</i></p><h4>首页</h4></a></li>
	  	 	<li><a href="products.html"><p><i class="icons">&#xe6d0;</i></p><h4>产品/方案</h4></a></li>
	  	 	<li><a href="help.html"><p><i class="icons">&#xe6c9;</i></p><h4>技术支持</h4></a></li>
	  	 	<li class="active"><a href="shopcar.html"><p><i class="icons">&#xe601;</i></p><h4>购物车</h4></a></li>
	  	 	<li><a href="my.html"><p><i class="icons">&#xe605;</i></p><h4>我的</h4></a></li>
	  	</ul>
       </div>
       
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
    $(function(){
    	//单个商品
	    $("body").on("click","dd .checks",function(){
	    	$(this).toggleClass("active");
	    	sum()
	    })

	    //单个店铺商品
	    $("body").on("click","dt",function(){
	    	$(this).toggleClass("active");
	    	if($(this).hasClass("active")){
                $(this).parent().find("dd").find(".checks").addClass("active")
	    	}else{
	    		$(this).parent().find("dd").find(".checks").removeClass("active")
	    	}
	    	sum()
	    })
	    
	    //加
	    $("body").on("click",".add",function(){
	    	$(this).prev().text($(this).prev().text()*1+1);
	    	sum()
	    })
	    
	    //减
	    $("body").on("click",".minus",function(){
	    	if($(this).next().text()*1 > 1){
	    		$(this).next().text($(this).next().text()*1-1)
	    	};
	    	sum()
	    })
	    
	    //全选
	    $("body").on("click",".pay label",function(){
	    	$(this).toggleClass("active");
	    	if($(this).hasClass("active")){
	    		$(".checks,dt").addClass("active")
	    	}else{
	    		$(".checks,dt").removeClass("active")
	    	}
	    	sum()	
	    })
	    
	    //统计
	    function totals(){
	    	var num=0;
	    	$(".checks.active").each(function(index,item){
	    		num += ($(item).parents("dd").find(".price").text().substring(1,$(item).parents("dd").find(".price").text().length)*$(item).parents("dd").find(".number").text());
	    	})
	    	return num
	    }
	    function sum(){
	    	$(".pay b").text($(".checks.active").size());
	    	$(".pay p span").text("￥"+totals())
	    }
	    
	    //编辑
	    var flag=true;
	    $(".bjbtn").click(function(){
	    	if(flag){
	    	  $(this).text("完成");
	    	  $(".js").hide().next().show();
	    	}else{
	    	  $(this).text("编辑");
	    	  $(".js").show().next().hide();
	    	}
	    	flag=!flag
	    })
	   
	})
</script>
</html>